import { useState, useEffect, useRef, Fragment } from 'react'
// import { useNavigate } from 'react-router-dom'
import {
  Row,
  Col,
} from 'antd'
import * as echarts from 'echarts'
import { articleApi } from '../../api'

const myLayout = {
  sm: {
    span: 24
  },
  lg: {
    span: 8
  }
}

interface IProps {
  myLayout?: any;
  children?: any;
}

/**
 * 文章相关的可视化图标
 */
export default function ArticleChart (props: IProps) {
  const articleViewRef: any = useRef()
  const articleCountRef: any = useRef()

  // 每月文章的浏览量
  const getMonthlyView = () => {
    let articleViewChart = echarts.init(articleViewRef.current)

    articleApi.getMonthlyView().then((res: any) => {
      // console.log('getMonthlyView', res)
      var option = {
        title: {
          text: '文章浏览量'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: res.data.pv.map((item: any) => {
            return item.month
          })
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: res.data.pv.map((item: any) => {
            return item.value
          }),
          type: 'line',
          areaStyle: {}
        }]
      };

      articleViewChart.setOption(option);
    }) 
  }

  // 每月文章的数量
  const getMonthlyCount = () => {
    let articleCountChart = echarts.init(articleCountRef.current)

    articleApi.getMonthlyCount().then((res: any) => {
      // console.log('getMonthlyCount', res)
      var option = {
        title: {
          text: '文章数量'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: res.data.amount.map((item: any) => {
            return item.month
          })
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: res.data.amount.map((item: any) => {
            return item.value
          }),
          type: 'line',
          smooth: true
        }]
      };

      articleCountChart.setOption(option);
    })
  }

  useEffect(() => {
    getMonthlyView()
  }, [])

  useEffect(() => {
    getMonthlyCount()
  }, [])

  return (
    <Fragment>
      <Col className="gutter-row" { ...props.myLayout }>
        <div style={{height: '300px'}} ref={ articleViewRef } />
      </Col>
      <Col className="gutter-row" { ...props.myLayout }>
        <div style={{height: '300px'}} ref={ articleCountRef } />
      </Col>
    </Fragment>
  )
}